<template>
  <div>
    <common-head></common-head>

    <van-tabs v-model="active" line-width="50px" @click="cut" >
      <van-tab :title="item.title" v-for="item in Titles" :key="item.id"  >
        <!-- 装图片的大盒子 -->
        <div class="photoBox" v-for="item in photoList" :key="item.id" @click="details(item.id)">
          <van-image
            width="10rem"
            height="10rem"
            fit="fill"
            radius="5px"
            lazy-load
            :src="item.img_url"
          />
          <!-- 遮罩层 -->
          <div class="boxInfo">
            <!-- 每张图片的标题 -->
            <p>{{item.title}}</p>
            <p>
              <!-- 每张图片的内容 -->
              <span>{{item.zhaiyao}}</span>
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <common-footer></common-footer>
  </div>
</template>
<script>

export default {
  props: [],
  data () {
    return {
      Titles: [],
      photoList: [],
      list: [],
      active: 0
    }
  },
  methods: {
    //   获取分类数据
    async getTitle () {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      //   添加 “全部”  第一项数据
      this.Titles = res.message
      var obj = {
        title: '全部',
        id: 0
      }
      this.Titles.unshift(obj)
      // console.log('this.Titles', this.Titles)
    },
    async getPhotoList () {
      const { data: res } = await this.$http.get(
        '/api/getimages/' + this.active
      )
      //   console.log(res)
      this.photoList = res.message

      res.message.forEach(t => {
        this.list.push(
          Object.assign({}, t)
        )
      })
      console.log('this.photoList', this.photoList)
    },
    details (id) {
      this.$router.push('/photoInfo/' + id)
    },
    // 点了分类
    cut (name, title) {
      if (name === 0) {
        this.photoList = this.list
        return
      }
      const one = this.Titles.filter(t => t.title === title)
      const arry = this.list.filter(t => t.category_id === one[0].id)
      this.photoList = arry
      // console.log(name)
    }
  },
  mounted () {
    this.getTitle()

    this.getPhotoList(this.photoList)
  }
}
</script>
<style scoped lang='less'>
.van-tabs {
  margin-top: 50px;
}
/deep/ .van-tab {
  padding: 0 20px !important;
}
.photoBox {
  position: relative;
  margin: 0px;
  width: 92%;
}

.van-image {
  margin: 10px 15px 0 15px !important;
  // padding: 0 10px !important;
  width: 100% !important;
  height: 300px !important;
}
.boxInfo {
  color: #fff;
  position: absolute;
  width: 100%;
  margin: 0 15px !important;
  height: 100px !important;
  background-color: rgba(0, 0, 0, 0.4);
  top: 210px !important;
  border-radius: 5px;
}
.boxInfo p {
  font-size: 12px;
  margin: 10px !important;
}
</style>
